import React from "react";

import { Upload, message, Button } from "antd";
import { VideoCameraAddOutlined } from "@ant-design/icons";

import style from "./style.module.css";

const PinOne = () => {
  const props = {
    name: "file",
    action: "/api/addImg",
    headers: {
      authorization: "authorization-text",
    },
    onChange(info) {
      if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === "done") {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === "error") {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };

  return (
    <div className={style.pinone_M}>
      <div className={style.pinone_main_M}>
        <Upload {...props}>
          <div className={style.pinone_header_M}>
            <Button icon={<VideoCameraAddOutlined />}></Button>
          </div>
        </Upload>
      </div>
    </div>
  );
};

export default PinOne;
